import React, { Component } from 'react'
import TankGameComponent from '../../components/TankGameStateSynced/TankGameStateSynced'

// import PT from 'prop-types'

class TankGameStateSynced extends Component {

  socket = this.props.socket

  initJoin = () => {
    this.socket.on('player_init', client => {
      this.tankGame.self = {
        ...this.tankGame.self,
        uuid: client.id
      }
      this.socket.emit('tank_game_state:join_game', this.tankGame.self)
    })
  }

  playerAction = (uuid, action) => {
    this.socket.emit('tank_game_state:playerAction', {uuid, action})
  }

  componentDidMount = () => {
    
    this.socket.on('tank_game_state:sync_state', params => {
      let player = params.state.playerState[this.tankGame.self.uuid]
      delete params.state.playerState[this.tankGame.self.uuid]
      const enemys = params.state.playerState
      // console.log(player)
      if (player) {
        let temp = player.color
        player.color = player.color2
        player.color2 = temp
      }
      this.tankGame.player = player
      this.tankGame.enemys = enemys
    })
    
    this.tankGame.bindEvt()
    
  }

  render() {
    return (
      <TankGameComponent 
        ref={ ref => { this.tankGame = ref } }
        initJoin={ this.initJoin }
        playerAction={ this.playerAction }
      />
    )
  }
}

export default TankGameStateSynced
